<template>
  <div class="bottom-charts">
    <div class="bc-chart-item">
      <div class="bcci-header">2020年度</div>
      <dv-active-ring-chart :config="config4" />
      <Label-Tag :config="labelConfig" />
    </div>
    <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item">
      <div class="bcci-header">2021年度</div>
      <dv-active-ring-chart :config="config3" />
      <Label-Tag :config="labelConfig" />
    </div>

    <dv-decoration-2 class="decoration-2" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item">
      <div class="bcci-header">2022年度</div>
      <dv-active-ring-chart :config="config2" />
      <Label-Tag :config="labelConfig" />
    </div>

    <dv-decoration-2 class="decoration-3" :reverse="true" style="width:5px;" />

    <div class="bc-chart-item">
      <div class="bcci-header">2023年度</div>
      <dv-active-ring-chart :config="config1" />
      <Label-Tag :config="labelConfig" />
    </div>

  </div>
</template>

<script>
import LabelTag from './LabelTag'
import { listOne } from "@/api/module/gs/dashuju";
export default {
  name: 'BottomCharts',
  components: {
    LabelTag
  },
  data () {
    return {
      config1: {
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '75%',
        activeRadius: '70%'
      },

      config2: {

        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '75%',
        activeRadius: '70%'
      },

      config3: {

        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '75%',
        activeRadius: '70%'
      },

      config4: {

        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
        radius: '75%',
        activeRadius: '70%'
      },

      labelConfig: {
        data: ['创新项目', '创业项目', '实践项目']
      },
      onezhanhuaCount:0,
      twozhanhuaCount:0,
      threezhanhuaCount:0,
      fourzhanhuaCount:0,

      onecx:0,
    onecy :0,
    onesj :0,

      twocx:0,
      twocy:0,
      twosj:0,

      threecx:0,
      threecy :0,
      threesj :0,

      fourcx:0,
      fourcy :0,
      foursj :0,
    }
  },
  created() {
    this.getoneCount();

    this.$watch(
      () => [this.onecx, this.onecy, this.onesj],
      () => {
        this.createDataone();
      }
    );
    this.$watch(
      () => [this.twocx, this.twocy, this.twosj],
      () => {
        this.createDatatwo();
      }
    );
    this.$watch(
      () => [this.threecx, this.threecy, this.threesj],
      () => {
        this.createDatathree();
      }
    );
    this.$watch(
      () => [this.fourcx, this.fourcy, this.foursj],
      () => {
        this.createDatafour();
      }
    );



  },
  methods: {
    /** 查询成果总数 */
    getoneCount() {
      this.loading = true;
      listOne(this.queryParams).then(response => {

        this.onecx = response.cx;
        this.onecy = response.cy;
        this.onesj = response.sj;

        this.twocx = response.twocx;
        this.twocy = response.twocy;
        this.twosj = response.twosj;

        this.threecx = response.threecx;
        this.threecy = response.threecy;
        this.threesj = response.threesj;

        this.fourcx = response.fourcx;
        this.fourcy = response.fourcy;
        this.foursj = response.foursj;

console.log(this.twosj+"this.twosj");
        console.log(this.threecx+"this.threecx");



      });
    },
    /** 查询创新成果总数 */
    getCx() {
      this.loading = true;
      const queryParams = { resultType: "0" };
      listAchievement(queryParams).then(response => {

        this.cxCount = response.rows.length;
      });
    },
    /** 查询创业成果总数 */
    getCy() {
      this.loading = true;
      const queryParams = { resultType: "1" };  // 创建一个包含参数的对象
      listAchievement(queryParams).then(response => {

        this.cyCount = response.rows.length;
      });
    },
    /** 查询实践成果总数 */
    getSj() {
      this.loading = true;
      const queryParams = { resultType: "2" };  // 创建一个包含参数的对象
      listAchievement(queryParams).then(response => {

        this.sjCount = response.rows.length;
      });
    },
//2023
    createDataone () {
      const { randomExtend } = this
      this.config1 = {
        data: [
          {
            name: '创新项目',
            value: this.onecx,
          },
          {
            name: '创业项目',
            value: this.onecy,
          },
          {
            name: '实践项目',
            value: this.onesj,
          },

        ],
        radius: '75%',
        activeRadius: '70%'
      }
    },
//2022
    createDatatwo () {
      const { randomExtend } = this
      this.config2 = {
        data: [
          {
            name: '创新项目',
            value: this.twocx,
          },
          {
            name: '创业项目',
            value: this.twocy,
          },
          {
            name: '实践项目',
            value: this.twosj,
          },

        ],
        radius: '75%',
        activeRadius: '70%'
      }
    },
    //2021
    createDatathree () {
      const { randomExtend } = this
      this.config3 = {
        data: [
          {
            name: '创新项目',
            value: this.threecx,
          },
          {
            name: '创业项目',
            value: this.threecy,
          },
          {
            name: '实践项目',
            value: this.threesj,
          },

        ],
        radius: '75%',
        activeRadius: '70%'
      }
    },

//2020
    createDatafour () {
      const { randomExtend } = this
      this.config4 = {
        data: [
          {
            name: '创新项目',
            value: this.fourcx,
          },
          {
            name: '创业项目',
            value: this.fourcy,
          },
          {
            name: '实践项目',
            value: this.foursj,
          },

        ],
        radius: '75%',
        activeRadius: '70%'
      }
    },


  }






}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    width: 25%;
    height: 100%;
    padding-top: 20px;
    box-sizing: border-box;
  }

  .bcci-header {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }

  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration-1, .decoration-2, .decoration-3 {
    display: absolute;
    left: 0%;
  }
}
</style>
